<template>
    <el-container class="yun_printer_container">
        <el-main>
            <el-card class="box-card">
                <headerTemplate slot="header" ref="basePrinterHeader"
                                :table-ref="tableOptions.ref"
                                :toolbar_buttons="headerOption.toolbar_buttons"
                                :toolbar_filter="headerOption.toolbar_filter"
                                :searchForm="searchForm"
                                @event="handleHeaderEvent" />
                <div class="card_content">
                    <vxe-table-template :data="dataList" :options.sync="tableOptions"
                                        @event="handleTableEvent" />
                </div>
            </el-card>

            <component-dialog dialog-drag :options="componentDialogOption" />
        </el-main>
    </el-container>
</template>

<script>
import YunPrinterForm from "../dialog/YunPrinterForm";
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: "YunPrinter",
    provide() {
        //向下级组件注入方法
        return {
            setChildrenRef: (name, ref) => {
                this[name] = ref;
            },
            getChildrenRef: (name) => {
                return this[name];
            },
            getRef: () => {
                return this;
            },
        };
    },
    data() {
        let $this = this;
        return {
            brands: [ { 'code': 'xpyun', 'name': '芯烨云' } ],
            headerOption: {
                toolbar_buttons: [
                    {
                        id: "refresh",
                        icon: "el-icon-refresh-right",
                        show: true,
                        method: () => {
                            $this.getList();
                        },
                    },
                    {
                        id: "add",
                        icon: "fa fa-plus",
                        type: "primary",
                        show: true,
                        // permission: "save_dining_classify",
                        method: () => {
                            $this.toBasePrinterDialog(null, 'add');
                        },
                    },
                    {
                        id: "edit",
                        icon: "fa fa-pencil",
                        type: "success",
                        show: true,
                        // permission: "save_dining_classify",
                        method: () => {
                            $this.toBasePrinterDialog(null, "edit");
                        },
                    },
                    {
                        id: "delete",
                        icon: "fa fa-trash-o",
                        type: "danger",
                        show: true,
                        // permission: "del_dining_classify",
                        method: () => {
                            $this.delTable(null, "batch");
                        },
                    },
                ],
                toolbar_filter: [
                    { type: "text", field: "code", label: "编号" },
                    { type: "text", field: "name", label: "名称" },
                ],
            },
            token: this.$store.state.accessToken.token,
            account_set_sid: this.$utils.getAccountSetSid(),
            dataList: [],
            selectionList: [],
            tableOptions: {
                ref: "diningOrderTable",
                container: ".yun_printer_container",
                multiSelect: true,
                columns: [
                    {
                        label: "云打印机SN",
                        prop: "code",
                        align: "center",
                    },
                    {
                        label: "云打印机名称",
                        prop: "name",
                        align: "center",
                    },
                    {
                        label: "品牌",
                        prop: "brand",
                        align: "center",
                        formatter: (row) => {
                            let brand = {};
                            for (let i = 0; i < $this.brands.length; i++) {
                                if ($this.brands[i].code === row.brand) {
                                    brand = $this.brands[i];
                                    break;
                                }
                            }
                            if (brand.name) {
                                return brand.name
                            } else {
                                row.code;
                            }
                        },
                    },
                    {
                        label: "排序",
                        prop: "sn",
                        align: "center",
                        width: 90,
                    },
                ],
                operates: {
                    list: [
                        {
                            id: "edit",
                            icon: "fa fa-pencil",
                            type: "primary ",
                            size: "mini",
                            show: true,
                            tooltip: {
                                content: "编辑",
                            },
                            method: (index, row) => {
                                $this.toBasePrinterDialog(row, "edit");
                            },
                        },
                        {
                            id: "del",
                            icon: "fa fa-trash-o",
                            type: "danger",
                            size: "mini",
                            show: true,
                            tooltip: {
                                content: "删除",
                            },
                            method: (index, row) => {
                                $this.delTable(row);
                            },
                        },
                    ],
                },
                pagination: {
                    pageIndex: 1,
                    pageSize: window.configs.pageSize,
                },
            },
            searchForm: {
                paid_state: '',
            },
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        async init() {
            this.searchForm = {};
            this.getList();
        },
        handleHeaderEvent(event) {
            let $this = this;
            $this.searchForm = $.extend({}, $this.searchForm, event.searchForm);
            if (event.type === "search") {
                $this.getList(true);
            } else if (event.type === "refresh") {
                $this.getList(true);
            }
        },
        getList(search) {
            let $this = this;
            $this.dataList = [];
            if (search) {
                $this.tableOptions = $this.resetTablePagination($this.tableOptions);
            }
            let searchForm = $this.getQueryParams($this.tableOptions, $this.searchForm);
            $this.fetchData($this.$api.API_FindBasePrinters, searchForm).then(result => {
                $this.dataList = result.data || [];
                $this.tableOptions = $this.setTableTotal($this.tableOptions, result);
            }).catch(() => {
            });
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
                return;
            }
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
            }
        },
        toBasePrinterDialog(row, type) {
            let $this = this;
            let title = '';
            if (type === 'add') {
                row = {
                    sn: ($this.tableOptions.pagination.total || 0) + 1,
                };
                title = '新增云打印机';
            } else if (type === 'edit') {
                title = '编辑云打印机';
                if (!row) {
                    if (!$this.checkSelection($this.selectionList)) {
                        return;
                    }
                    row = $.extend({}, $this.selectionList[0]);
                }
            }
            $this.openComponentDialog({
                width: '600px',
                title,
                component: YunPrinterForm,
                propsData: {
                    row,
                },
                callback() {
                    $this.getList();
                },
            });
        },
        handleEvent(event) {
            if (event.type === 'refresh') {
                this.getList();
                return;
            }
            if (event.type === 'openDialog') {
                this.componentDialogOptions = $.extend({}, event.data);
            }
        },
        handleDialogEvent(event) {
        },
        delTable(row, type) {
            let $this = this;
            let sids = [];
            let errFlag = false;
            if (type === "batch") {
                if ($this.selectionList.length === 0) {
                    $this.$message.error("请选中一条数据");
                    return;
                } else {
                    sids = $this.selectionList.map((item) => item.sid);
                }
            } else {
                sids.push(row.sid);
            }
            if (!errFlag) {
                $this.confirmDel(sids);
            }
        },
        confirmDel(sids) {
            let $this = this;
            $this.$confirm("是否继续删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                $this.fetchData($this.$api.API_DeleteBasePrinters, { sids }).then(() => {
                    $this.$message.success('删除成功！');
                    $this.getList();
                }).catch(() => {
                });
            }).catch(() => {
            });
        },
        updateQR(row, type) {
            let $this = this;
            let sids = [];
            let errFlag = false;
            if (type === "batch") {
                if ($this.selectionList.length === 0) {
                    $this.$message.error("请选中一条数据");
                    return;
                } else {
                    sids = $this.selectionList.map((item) => item.sid);
                }
            } else {
                sids.push(row.sid);
            }
            if (!errFlag) {
                $this.confirmUpdateQR(sids);
            }
        },
        confirmUpdateQR(sids) {
            let $this = this;
            $this.$confirm("是否继续更新？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                $this.fetchData($this.$api.API_UpdateShareUrl, { sids }).then(() => {
                    $this.$message.success('更新成功！');
                    $this.getList();
                }).catch(() => {
                });
            }).catch(() => {
            });
        },
    },
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.yun_printer_container {
    height: 100%;

    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
        margin-bottom: 0px;
    }

    .top-card {
        height: auto !important;
    }

    /deep/ .audit {
        background-color: #c280ff;
        color: #ffffff;
    }

    /deep/ .reAudit {
        background-color: #02a7f0;
        color: #ffffff;
    }

    /deep/ .version {
        background-color: rgba(184, 116, 26, 1);
        border-color: rgba(184, 116, 26, 1);
        color: #ffffff;
    }

    .buttons {
        margin: 0 0 10px 0;
    }

    .head {
        /deep/ .el-upload--picture-card {
            display: none;
        }
    }

    .uploadPicture {
        /deep/ .el-upload--picture-card {
            width: 148px;
            height: 148px;
            line-height: 146px;
            margin-right: 60px;
            margin-bottom: 30px;
        }
    }

    /deep/ .view_paper {
        background-color: #f04f89;
        border-color: #f04f89;
        color: #fff;
    }
}
</style>
